import React, { Component } from "react"
import InfoTable from "../common/sourceTable"
import { Card, Button, Popconfirm, message } from "antd"
import { FormInstance } from 'antd/lib/form'
import { EditFilled, DeleteFilled } from '@ant-design/icons'
import { getGoodRecall, editGoodrecall, addGoodRecall, deleteGoodRecall } from "@net/good/recall"
import DialogForm from '../common/dialogForm'
import Modal from '@comp/Modal'
import HeaderSearch from '../common/headerSearch'
import "../../index.scss"
import Power from "@comm/power"
import { getMoveInfo } from "@net/move/index"
import DialogTable from "../common/dialogTable"
import moment from "moment"

interface IPorps { }
interface IStates {
    data: any[]
    loading: boolean,
    popVisible: string,
    visible: boolean,
    title: string,
    delId: number,
    editId: number,
    isEdit: boolean,
    page: number,
    pageSize: number,
    total: number,
    diaVisble: boolean,
    diaTabData: any[],
    search: any,
    moId:number,
}

export default class GoodRecall extends Component<IPorps, IStates> {
    // 表格设置
    private column = [
        {
            dataIndex: "reFoName",
            title: "食品名称",
            align: "center"
        },
        {
            dataIndex: "reSpecs",
            title: "食品规格",
            align: "center",
        },
        {
            dataIndex: "reNum",
            title: "召回数量",
            align: "center"
        },
        {
            dataIndex: "reSource",
            title: "召回来源",
            align: "center",
            ellipsis:true
        },
        {
            dataIndex: "reReason",
            title: "召回原因",
            align: "center",
            ellipsis:true
        },
        {
            dataIndex: "reStatus",
            title: "召回情况",
            align: "center",
            ellipsis:true
        },
        {
            dataIndex: "rePlan",
            title: "整改方案",
            align: "center",
            ellipsis:true
        },
        {
            dataIndex: "reTime",
            title: "召回时间",
            align: "center"
        },
        {
            dataIndex: "do",
            title: "操作",
            align: "center",
            render: (text: any, record: any) => {
                const item = record
                return (
                    <div className="do">
                        <Power authKey="good:recall:update">
                            <Button size="small" type="primary" icon={<EditFilled />} onClick={() => { this.openEditDia(item) }} />
                        </Power>
                        <Power authKey="good:recall:remove">
                            <Popconfirm title="您确定要删除吗？" okText="是" cancelText="否"
                                onConfirm={this.delete} visible={item.key === this.state.popVisible}
                                onCancel={() => { this.setState({ popVisible: "-1" }) }}>
                                <Button size="small" danger icon={<DeleteFilled />} onClick={() => { this.openPopDia(item) }} />
                            </Popconfirm>
                        </Power>
                    </div>
                )
            }
        }
    ]
    private columnDia = [
        {
            key: "traPro",
            dataIndex: "traPro",
            title: "货物名称",
            align: "center",
            fixed: 'left',
        },
        {
            key: "traNum",
            dataIndex: "traNum",
            title: "货物数量",
            align: "center"
        },
        {
            key: "traSpecs",
            dataIndex: "traSpecs",
            title: "货物规格",
            align: "center"
        },
        {
            key: "traPerson",
            dataIndex: "traPerson",
            title: "运输人员",
            align: "center",
        },
        {
            key: "vehicle",
            dataIndex: "vehicle",
            title: "运输车辆",
            align: "center"
        },
        {
            key: "traMode",
            dataIndex: "traMode",
            title: "运输方式",
            align: "center",
            render:(text:string) => {
                switch(text){
                    case "0" : return "铁路运输";
                    case "1" : return "公路运输";
                    case "2" : return "航空运输";
                    case "3" : return "水路运输";
                    default : return ""
                }
            }
        },
        {
            key: "traSendTime",
            dataIndex: "traSendTime",
            title: "发货时间",
            align: "center"
        },
        {
            key: "traRecTime",
            dataIndex: "traRecTime",
            title: "收货时间",
            align: "center"
        },
        {
            key: "deliveryPlace",
            dataIndex: "deliveryPlace",
            title: "发货地点",
            align: "center"
        },
        {
            key: "recievePlace",
            dataIndex: "recievePlace",
            title: "收货地点",
            align: "center"
        },
        {
            key: "distributor",
            dataIndex: "distributor",
            title: "经销商",
            align: "center"
        },
        {
            key: "distributorPer",
            dataIndex: "distributorPer",
            title: "经销商负责人",
            align: "center"
        },
        {
            key: "distributorTel",
            dataIndex: "distributorTel",
            title: "经销联系方式",
            align: "center"
        },
    ]
    private dialogFormCol = () => {
        return [
            {
                type: 'input',
                label: "食品名称",
                name: "reFoName",
                rules: [
                    { required: true, message: "请输入名称" }
                ],
                component: {
                    placeholder: "请输入名称",
                    disabled:this.state.isEdit 
                },
                style: { borderRadius: "5px" },
                id: "recName",
                onFocus: () => this.openDiaTable()
            },
            {
                type: 'input',
                label: "食品规格",
                name: "reSpecs",
                rules: [
                    { required: true, message: "请输入食品规格" }
                ],
                component: {
                    placeholder: "请输入食品规格",
                },
                style: { borderRadius: "5px" }
            },
            {
                type: 'input',
                label: "召回数量",
                name: "reNum",
                rules: [
                    { required: true, message: "请输入召回数量" }
                ],
                component: {
                    placeholder: "请输入召回数量",
                },
                style: { borderRadius: "5px" }
            },
            {
                type: 'input',
                label: "召回来源",
                name: "reSource",
                rules: [
                    { required: true, message: "请输入召回来源" }
                ],
                component: {
                    placeholder: "请输入召回来源",
                },
                style: { borderRadius: "5px" }
            },
            {
                type: 'textarea',
                label: "召回原因",
                name: "reReason",
                rules: [
                    { required: true, message: "请输入召回原因" }
                ],
                component: {
                    placeholder: "请输入召回原因",
                },
                style: { borderRadius: "5px" }
            },
            {
                type: 'textarea',
                label: "召回情况",
                name: "reStatus",
                rules: [
                    { required: true, message: "请输入召回情况" }
                ],
                component: {
                    placeholder: "请输入召回情况",
                },
                style: { borderRadius: "5px" }
            },
            {
                type: 'textarea',
                label: "整改方案",
                name: "rePlan",
                rules: [
                    { required: true, message: "请输入整改方案" }
                ],
                component: {
                    placeholder: "请输入整改方案",
                },
                style: { borderRadius: "5px" }
            },
            {
                type: 'datePicker',
                label: "召回时间",
                name: "reTime",
                rules: [
                    { required: true, message: "请输入召回时间" }
                ],
                component: {
                    placeholder: "请输入召回时间",
                },
                style: { borderRadius: "5px" }
            },
        ]
    }
    private searchCol = [
        {
            type: 'input',
            name: "fname",
            label: "食品名称",
            component: {
                placeholder: "请输入食品名称",
            },
            style: { borderRadius: "5px" }
        },
        {
            type: 'datePicker',
            name: "fTime",
            label: "召回时间",
            component: {
                placeholder: "请选择召回时间",
            },
            style: { borderRadius: "5px" }
        }
    ]
    private dialogFormRef = React.createRef<FormInstance>() as any
    constructor(props: IPorps) {
        super(props)
        this.state = {
            data: [],
            loading: true,
            popVisible: "-1",
            visible: false,
            title: "",
            delId: 0,
            editId: 0,
            isEdit: false,
            total: 0,
            page: 1,
            pageSize: 5,
            diaVisble: false,
            diaTabData: [],
            search: null,
            moId:0,
        }
    }
    public componentDidMount() {
        this.fetchData(1, 5)
    }

    // 获取数据
    public fetchData = async (page: number, pageSize: number) => {
        const res = await getGoodRecall({ page, pageSize }, this.state.search)
        res.data.data.map((item: any) => {
            return item.key = item.Id
        })
        this.setState({ loading: false, data: res.data.data, total: res.data.total })
    }
    // 页码切换监听事件
    public pageChange = (page: number, pageSize?: number) => {
        if (pageSize) {
            this.setState({ page, pageSize }, () => {
                this.fetchData(page, pageSize)
            })
        }
    }
    // 弹框表格页码切换监听事件
    public pageDiaChange = (page: number, pageSize?: number) => {
        if (pageSize) {
            getMoveInfo({ page, pageSize }, null).then((res: any) => {
                res.data.data.forEach((item: any) => {
                    item.key = item.code
                })
                this.setState({ diaTabData: res.data.data, total: res.data.total })
            })
        }
    }
    // 打开选择货物弹框
    public openDiaTable = () => {
        this.setState({ diaVisble: true }, () => {
            this.pageDiaChange(1, 5)
        })
    }
    public diaSearch = async (name: string) => {
        let res: any
        name === "" ?
            res = await getMoveInfo({ page: 1, pageSize: 5 },null )
            :
            res = await getMoveInfo({ page: 1, pageSize: 1 }, {fname:name})
        const { status, msg, data,total } = res.data
        if (status === 203) {
            message.error({ content: msg, style: { marginTop: "20%" } })
        } else {
            message.success({ content: msg, style: { marginTop: "20%" } })
            this.setState({ diaTabData: data,total })
        }
    }
    public search = (item: any) => {
        if (item.fname === undefined && item.fTime === undefined) {
            this.setState({ search: null }, () => {
                this.fetchData(this.state.page, this.state.pageSize)
            })
            return
        }
        item.fTime = moment(item.fTime).format("YYYY/MM/DD")
        this.setState({ search: item }, async() => {
            const res = await getGoodRecall({ page: 1, pageSize: 5 },this.state.search)
            const { status, msg, data,total } = res.data
            if (status === 203) {
                message.error({ content: msg, style: { marginTop: "20%" } })
            } else {
                message.success({ content: msg, style: { marginTop: "20%" } })
                this.setState({ data: data ,total})
            }
        })
    }
    // 打开对话框
    public openAddDialog = () => {
        this.setState({ visible: true, title: "食品召回记录添加", isEdit: false })
    }
    public openEditDia = (item: any) => {
        this.setState({ visible: true, title: "食品召回记录编辑", editId: item.Id, isEdit: true }, () => {
            item.reTime = moment(item.reTime, 'YYYY/MM/DD')
            this.dialogFormRef.current.setFieldsValue(item)
        })
    }
    public openPopDia = (item: any) => {
        this.setState({ popVisible: item.key, delId: item.Id })
    }
    // 点击对话框确认事件
    public onAddOk = () => {
        this.dialogFormRef.current.validateFields(this.add())
    }
    public onEditOk = () => {
        this.dialogFormRef.current.validateFields(this.edit())
    }
    public add = () => {
        const values = this.dialogFormRef.current.getFieldsValue()
        values.reTime = moment(values.reTime).format("YYYY/MM/DD")
        values.moId = this.state.moId
        addGoodRecall(values).then((res: any) => {
            const { msg, status } = res.data
            if (status === 203) {
                message.error({ content: msg, style: { marginTop: "20%" } })
            } else if (status === 200) {
                message.success({ content: msg, style: { marginTop: "20%" } })
                this.cancel()
                this.fetchData(this.state.page, this.state.pageSize)
            }
        })
    }
    public edit = async () => {
        const values = this.dialogFormRef.current.getFieldsValue()
        values.Id = this.state.editId
        values.moId = this.state.moId
        values.reTime = moment(values.reTime).format("YYYY/MM/DD")
        const res = await editGoodrecall(values)
        const { status, msg } = res.data
        if (status === 203) {
            message.error({ content: msg, style: { marginTop: "20%" } })
        } else if (status === 200) {
            message.success({ content: msg, style: { marginTop: "20%" } })
            this.cancel()

        }
    }
    public delete = async () => {
        const res = await deleteGoodRecall(this.state.delId)
        const { status, msg } = res.data
        if (status === 203) {
            message.error({ content: msg, style: { marginTop: "20%" } })
        } else if (status === 200) {
            message.success({ content: msg, style: { marginTop: "20%" } })
            this.setState({ popVisible: "-1" })
            this.fetchData(this.state.page, this.state.pageSize)
        }
    }
    public cancel = () => {
        this.setState({ visible: false, isEdit: false }, () => {
            this.dialogFormRef.current.resetFields()
            this.fetchData(this.state.page, this.state.pageSize)
        })
    }
    public selectRow = (item: any) => {
        this.setState({ diaVisble: false,moId:item.Id }, () => {
            this.dialogFormRef.current.setFieldsValue({ reFoName: item.traPro })
        })
    }
    public getDiaContent = () => {
        return (
            <DialogTable
                columns={this.columnDia}
                dataSource={this.state.diaTabData}
                pageChange={this.pageDiaChange}
                total={this.state.total}
                scroll={{ x: 1650 }}
                selectRow={this.selectRow}
                search={this.diaSearch}>
            </DialogTable>
        )
    }
    public renderDiaTab = () => {
        return (<Modal
            title="选择食品"
            visible={this.state.diaVisble}
            content={this.getDiaContent()}
            width="1200px"
            onCancel={() => { this.setState({ diaVisble: false }) }}
        />
        )
    }
    public getContent = () => {
        return (
            <DialogForm ref={this.dialogFormRef} column={this.dialogFormCol()} go={() => { }}></DialogForm>
        )
    }
    public renderModal = (item?: string) => {
        return (<Modal
            title={this.state.title}
            visible={this.state.visible}
            content={this.getContent()}
            width="1000px"
            onOk={item === "" ? this.onAddOk : this.onEditOk}
            onCancel={this.cancel}></Modal>)
    }
    public renderButton() {
        return (
            <div>
                <Power authKey="good:recall:save">
                    <Button type="primary" onClick={() => { this.openAddDialog() }}>新增召回信息</Button>
                </Power>
            </div>
        )
    }
    public render() {
        return (
            <div className="source">
                <Card className="card">
                    <HeaderSearch
                        authKey="good:recall:list"
                        column={this.searchCol}
                        search={this.search}></HeaderSearch>
                    {this.renderButton()}
                    <InfoTable
                        columns={this.column}
                        loading={this.state.loading}
                        dataSource={this.state.data}
                        tableKey="goodProductTable"
                        pageChange={this.pageChange}
                        total={this.state.total}>
                    </InfoTable>
                </Card>
                {this.state.title === "食品召回记录添加" ? this.renderModal("") : this.renderModal()}
                {this.renderDiaTab()}
            </div>
        )
    }
}